<!doctype html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Tree mode. Loading from DB</title>
	
	
	<script src='../../codebase/dhtmlxscheduler.js?v=5.3.10' type="text/javascript" charset="utf-8"></script>
	<script src='../../codebase/ext/dhtmlxscheduler_timeline.js?v=5.3.10' type="text/javascript" charset="utf-8"></script>
	<script src='../../codebase/ext/dhtmlxscheduler_treetimeline.js?v=5.3.10' type="text/javascript" charset="utf-8"></script>
	
	<link rel='stylesheet' type='text/css' href='../../codebase/dhtmlxscheduler_material.css?v=5.3.10'>
	
	<style>
		html, body{
			margin:0px;
			padding:0px;
			height:100%;
			overflow:hidden;
		}	
		.one_line{
			white-space:nowrap;
			overflow:hidden;
			padding-top:5px; padding-left:5px;
			text-align:left !important;
		}
	</style>

	<script type="text/javascript" charset="utf-8">
		window.addEventListener("DOMContentLoaded", function(){

			scheduler.locale.labels.timeline_tab = "Timeline";
			scheduler.locale.labels.section_custom="Section";
			scheduler.config.details_on_create=true;
			scheduler.config.details_on_dblclick=true;

			//===============
			//Configuration
			//===============	
			
			elements = [ // original hierarhical array to display
				{key:10, label:"Web Testing Dep.", open: true, children: [
					{key:20, label:"Elizabeth Taylor"},
					{key:30, label:"Managers", open: true, children: [
						{key:40, label:"John Williams"},
						{key:50, label:"David Miller"}
					]},
					{key:60, label:"Linda Brown"},
					{key:70, label:"George Lucas"}
				]},
				{key:80, label:"Kate Moss"},
				{key:90, label:"Dian Fossey"}
			];
		
			
			scheduler.createTimelineView({
				section_autoheight: false,
				name:	"timeline",
				x_unit:	"minute",
				x_date:	"%H:%i",
				x_step:	30,
				x_size: 24,
				x_start: 16,
				x_length:	48,
				y_unit: elements,
				y_property:	"section_id",
				render: "tree",
				folder_events_available: true,
				dy:60
			});
			
			

			//===============
			//Data loading
			//===============
			scheduler.config.lightbox.sections=[	
				{name:"description", height:60, map_to:"text", type:"textarea" , focus:true},
				{name:"custom", height:30, type:"timeline", options:null , map_to:"section_id" }, //type should be the same as name of the tab
				{name:"time", height:72, type:"time", map_to:"auto"}
			]
			
			scheduler.init('scheduler_here',new Date(2017,5,30),"timeline");
			scheduler.load("/scheduler/backend/treetimeline-events");
			
			var dp = new dataProcessor("/scheduler/backend/treetimeline-events");
			dp.init(scheduler);
			dp.setTransactionMode("REST", false);
		});
		
	</script>
</head>
<body>
	<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
		<div class="dhx_cal_navline">
			<div class="dhx_cal_prev_button">&nbsp;</div>
			<div class="dhx_cal_next_button">&nbsp;</div>
			<div class="dhx_cal_today_button"></div>
			<div class="dhx_cal_date"></div>
			<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
			<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
			<div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
			<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
		</div>
		<div class="dhx_cal_header">
		</div>
		<div class="dhx_cal_data">
		</div>		
	</div>
</body>